<template>
  <el-dialog append-to-body class="common_dialog" custom-class="reset-dialog-width" :visible.sync="visible" :title="!queryParams.id ?'添加订单' : '修改订单'" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="form" :rules="dataRule" ref="form" label-width="120px">
      <el-form-item label="用户昵称">
        <el-input v-model="form.userName" placeholder="请输入用户昵称" readonly clearable />
      </el-form-item>
      <el-form-item label="用户手机号">
        <el-input v-model="form.userMobile" placeholder="请输入用户手机号" readonly clearable />
      </el-form-item>
      <el-form-item label="订单编号">
        <el-input v-model="form.number" placeholder="请输入订单编号" readonly clearable />
      </el-form-item>
      <el-form-item label="订单金额">
        <el-input v-model="form.price" placeholder="请输入订单金额" readonly clearable />
      </el-form-item>
      <el-form-item label="支付方式">
        <dict-tag :options="dict.type.jieke_payment_method" :value="form.paymentMethod" />
      </el-form-item>
      <el-form-item label="订单类型">
        <dict-tag :options="dict.type.jieke_order_type" :value="form.type" />
      </el-form-item>
      <el-form-item label="用户备注" prop="content">
        <el-input type="textarea" :rows="2" v-model="form.content" placeholder="请输入用户备注" readonly clearable />
        <!-- <Editor v-model="form.content" :min-height="192" /> -->
      </el-form-item>
      <el-form-item label="订单状态" prop="status" class="order_status">
        <el-radio-group v-model="form.status">
          <el-radio :label="item.value" v-for="item,index in dict.type.jieke_order_status" :key="index">{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="加急服务" prop="urgent">
        <el-select v-model="form.urgent" placeholder="请选择加急服务" clearable>
          <el-option label="是" :value="2"></el-option>
          <el-option label="否" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客服订单备注" prop="xihuContent">
        <el-input type="textarea" :rows="2" v-model="form.xihuContent" placeholder="请输入客服订单备注" clearable />
        <!-- <Editor v-model="form.content" :min-height="192" /> -->
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button :loading="confirmLoading" type="primary" @click="formSubmitHandle()">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
import { orderSave, getOrder } from "@/api/order/order";
export default {
  dicts: ['jieke_order_status', 'jieke_payment_method', 'jieke_order_type', 'jieke_order_urgent'],
  data() {
    return {
      visible: false,
      form: {
        id: null,
        userName: '',
        userMobile: '',
        number: '',
        price: '',
        paymentMethod: '',
        type: '',
        status: '',
        content: '',
        urgent: '',
      },
      confirmLoading: false,
      queryParams: {},
    }
  },

  computed: {
    dataRule() {
      return {
        goodsTypeId: [
          { required: true, message: '请选择分类', trigger: 'change' }
        ]

      }

    }
  },
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['form'].resetFields()
        this.reset()
        this.confirmLoading = false
        this.form.id = this.queryParams.id ? this.queryParams.id : ''
        this.queryParams.id ? this.getInfo() : ''
      })
    },
    // 重置表单
    reset() {
      this.form = {
        id: null,
        userName: '',
        userMobile: '',
        number: '',
        price: '',
        paymentMethod: '',
        type: '',
        status: '',
        content: '',
        urgent: '',
      };
    },

    // 获取信息
    getInfo() {
      const id = this.queryParams.id
      getOrder(id).then(response => {
        response.data.status = String(response.data.status)
        response.data.urgent = Number(response.data.urgent)
        this.form = response.data;
      });
    },

    // 表单提交
    formSubmitHandle: debounce(function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.confirmLoading = true
          orderSave(this.form).then(response => {
            this.$modal.msgSuccess("操作成功");
            this.visible = false
            this.confirmLoading = false
            this.$emit('refreshDataList')
          }).catch(() => {
            this.confirmLoading = false
          });
        }
      })
    }, 1000, { 'leading': true, 'trailing': false }),

  }
}
</script>
<style lang="scss" scoped>
.order_status {
  .el-radio-group {
    margin-top: 10px;
    .el-radio {
      width: 110px;
      margin-bottom: 16px;
    }
  }
}
</style>
